import MenuIcon from "@mui/icons-material/Menu";
import { PaletteMode } from "@mui/material";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Container from "@mui/material/Container";
import Divider from "@mui/material/Divider";
import Drawer from "@mui/material/Drawer";
import MenuItem from "@mui/material/MenuItem";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Image from "next/image";
import { usePathname, useRouter } from "next/navigation";
import * as React from "react";
import p1 from "../../../public/title.svg";
import ToggleColorMode from "./ToggleColorMode";
const logoStyle = {
  width: "140px",
  height: "auto",
  cursor: "pointer",
};

interface AppAppBarProps {
  mode: PaletteMode;
  toggleColorMode: () => void;
}

function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) {
  const [open, setOpen] = React.useState(false);
  const router = useRouter();
  const pathname = usePathname();
  const words = pathname.split("/");
  const word = words[words.length - 1];

  const toggleDrawer = (newOpen: boolean) => () => {
    setOpen(newOpen);
  };

  const scrollToSection = (sectionId: string) => {
    const sectionElement = document.getElementById(sectionId);
    const offset = 128;
    if (sectionElement) {
      const targetScroll = sectionElement.offsetTop - offset;
      sectionElement.scrollIntoView({ behavior: "smooth" });
      window.scrollTo({
        top: targetScroll,
        behavior: "smooth",
      });
      setOpen(false);
    }
  };

  return (
    <div>
      <AppBar
        position="fixed"
        sx={{
          boxShadow: 0,
          bgcolor: "transparent",
          backgroundImage: "none",
          mt: 2,
        }}
      >
        <Container maxWidth="lg">
          <Toolbar
            variant="regular"
            sx={(theme) => ({
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              flexShrink: 0,
              borderRadius: "999px",
              bgcolor:
                theme.palette.mode === "light"
                  ? "rgba(255, 255, 255, 0.4)"
                  : "rgba(0, 0, 0, 0.4)",
              backdropFilter: "blur(24px)",
              maxHeight: 40,
              border: "1px solid",
              borderColor: "divider",
              boxShadow:
                theme.palette.mode === "light"
                  ? `0 0 1px rgba(85, 166, 246, 0.1), 1px 1.5px 2px -1px rgba(85, 166, 246, 0.15), 4px 4px 12px -2.5px rgba(85, 166, 246, 0.15)`
                  : "0 0 1px rgba(2, 31, 59, 0.7), 1px 1.5px 2px -1px rgba(2, 31, 59, 0.65), 4px 4px 12px -2.5px rgba(2, 31, 59, 0.65)",
            })}
          >
            <Box
              sx={{
                flexGrow: 1,
                display: "flex",
                alignItems: "center",
                ml: "-18px",
                px: 0,
              }}
            >
              <Box
                sx={{
                  position: "absolute",
                  left: "-181px",
                  top: {
                    xl: "-103px",
                    lg: "-103px",
                    md: "-103px",
                    sm: "-103px",
                    xs: "-107px",
                  },
                }}
              >
                <Image
                  src={p1}
                  width={512}
                  height={288}
                  alt="Picture of the author"
                />
              </Box>

              <Box sx={{ display: "flex", marginLeft: "7rem" }}>
                <MenuItem
                  onClick={() => router.push("index")}
                  sx={{
                    py: "6px",
                    px: "12x",
                    backgroundColor:
                      word == "index" ? "rgba(0, 0, 0, 0.04)" : "none",
                  }}
                >
                  <Typography variant="body2" color="text.primary">
                    Home
                  </Typography>
                </MenuItem>
                <MenuItem
                  onClick={() => router.push("align")}
                  sx={{
                    py: "6px",
                    px: "12x",
                    mx: "10px",
                    backgroundColor:
                      word == "align" ? "rgba(0, 0, 0, 0.04)" : "none",
                  }}
                >
                  <Typography variant="body2" color="text.primary">
                    Align
                  </Typography>
                </MenuItem>
                <MenuItem
                  onClick={() => router.push("download")}
                  sx={{
                    py: "6px",
                    px: "12px",
                    backgroundColor:
                      word == "download" ? "rgba(0, 0, 0, 0.04)" : "none",
                  }}
                >
                  <Typography variant="body2" color="text.primary">
                    Download
                  </Typography>
                </MenuItem>
                {/* <MenuItem
                  onClick={() => router.push("task")}
                  sx={{
                    py: "6px",
                    px: "12px",
                    mx: "15px",
                    backgroundColor:
                      word == "task" ? "rgba(0, 0, 0, 0.04)" : "none",
                  }}
                >
                  <Typography variant="body2" color="text.primary">
                    Task Queue
                  </Typography>
                </MenuItem> */}
              </Box>
            </Box>
            <Box
              sx={{
                display: { xs: "none", md: "flex" },
                gap: 0.5,
                alignItems: "center",
              }}
            >
              {/* <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} /> */}
            </Box>
            <Box sx={{ display: "none" }}>
              <Button
                variant="text"
                color="primary"
                aria-label="menu"
                onClick={toggleDrawer(true)}
                sx={{ minWidth: "30px", p: "4px" }}
              >
                <MenuIcon />
              </Button>
              <Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
                <Box
                  sx={{
                    minWidth: "60dvw",
                    p: 2,
                    backgroundColor: "background.paper",
                    flexGrow: 1,
                  }}
                >
                  <Box
                    sx={{
                      display: "flex",
                      flexDirection: "column",
                      alignItems: "end",
                      flexGrow: 1,
                    }}
                  >
                    <ToggleColorMode
                      mode={mode}
                      toggleColorMode={toggleColorMode}
                    />
                  </Box>
                  <MenuItem onClick={() => scrollToSection("features")}>
                    Home
                  </MenuItem>
                  <MenuItem onClick={() => scrollToSection("testimonials")}>
                    Search Protein
                  </MenuItem>
                  <MenuItem onClick={() => scrollToSection("highlights")}>
                    Structure Alignment
                  </MenuItem>
                  <MenuItem onClick={() => scrollToSection("pricing")}>
                    Download
                  </MenuItem>
                  <MenuItem onClick={() => scrollToSection("faq")}>
                    Help
                  </MenuItem>
                  <Divider />
                  <MenuItem>
                    <Button
                      color="primary"
                      variant="contained"
                      component="a"
                      href="/material-ui/getting-started/templates/sign-up/"
                      target="_blank"
                      sx={{ width: "100%" }}
                    >
                      Sign up
                    </Button>
                  </MenuItem>
                  <MenuItem>
                    <Button
                      color="primary"
                      variant="outlined"
                      component="a"
                      href="/material-ui/getting-started/templates/sign-in/"
                      target="_blank"
                      sx={{ width: "100%" }}
                    >
                      Sign in
                    </Button>
                  </MenuItem>
                </Box>
              </Drawer>
            </Box>
          </Toolbar>
        </Container>
      </AppBar>
    </div>
  );
}

export default AppAppBar;
